<template>
	<div>
		<el-row :span="24">
			<el-col :sm="24" :xs="0">
				<PcHedaer ref="pcHedaer"></PcHedaer>
				<div class="pc_con">
					<PcDrawer ref="pcDrawer" :navIndex="navIndex1" :navs="navs" :changeNav="changeNav1"></PcDrawer>
					<div class="pc_conbox">
						<div class="pc_conboxs scroll-container1"  @scroll="pageScroll1">
							<div class="rightCon">
								<div class="con">
									<div class="left" style="width: 90px;">
										<div class="litem" v-for="(item,index) in cates" :key="index" @click="changehuodong(index)" style="height: 45px;">
											<img v-if="selecthuodong == index" src="../../assets/images/yh/bg1.png" alt="">
											<img v-else src="../../assets/images/yh/bg3.png" alt="">
											<div class="litembox litemboxTow" :class="selecthuodong == index ? 'color':''">
												<div>{{$t(item.lang)}}</div>
											</div>
										</div>
										<!-- <div class="litem2 litem2THree" @click="goreceive">{{$t('h_prefereDetalis.title6')}}</div> -->
									</div>
									<div class="rightTow" >
										<div class="ul" style="width: 100%;padding-bottom: 20px;">
											<li v-for="item in lists" @click="godetail(item)">
												<img :src="item.pic" alt="">
											</li>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</el-col>
			<el-col :sm="0" :xs="24">
				<div>
					<!-- <div class="header">
						<div class="hitem" :class="selecttab == 0 ? 'active':''" @click="changetab(0)">活动</div>
						<div class="hitem" :class="selecttab == 1 ? 'active':''" @click="changetab(1)">任务</div>
						<div class="hitem" :class="selecttab == 2 ? 'active':''" @click="changetab(2)">返水</div>
						<div class="hitem" :class="selecttab == 3 ? 'active':''" @click="changetab(3)">更多奖励</div>
					</div> -->
					<div class="header anquantop">
						<div class="headerleft" @click="goback">
							<i style="display: inline-flex; justify-content: center; align-items: center;">
								<svg viewBox="0 0 21.999 35.998" width="1em" height="1em" fill="currentColor"
									aria-hidden="true" focusable="false">
									<use xlink:href="/icons/icon.svg#comm_icon_fh--sprite"></use>
								</svg>
							</i>
							<span></span>
						</div>
						<div class="headertitle">{{$t('h_prefereDetalis.title7')}}</div>
						<div class="headerright"></div>
					</div>
					<div class="con" v-if="selecttab == 0||selecttab == 1&&selecttabTow==0">
						<div class="left">
							<div class="litem" v-for="(item,index) in cates" :key="index" @click="changehuodong(index)">
								<img v-if="selecthuodong == index" src="../../assets/images/yh/bg1.png" alt="">
								<img v-else src="../../assets/images/yh/bg3.png" alt="">
								<div class="litembox" :class="selecthuodong == index ? 'color':''">
									<div style="line-height: .8rem;">{{$t(item.lang)}}</div>
								</div>
							</div>
							<!-- <div class="litem2" @click="goreceive">{{$t('h_prefereDetalis.title6')}}</div> -->
						</div>
						<div class="right" >
							<div class="ul" style="width: 100%;padding-bottom: 20px;">
								<li v-for="item in lists" @click="godetail(item)" style="width: 100%;padding: 7px 2.5px;height: 2.6rem;">
									<img :src="item.pic" alt="">
								</li>
							</div>
						</div>
					</div>
					<taskBox :selecttabTo="selecttabTow" @seltabTo="seltabTo" v-if="selecttab == 1"></taskBox>
					<Tabnav :activeInd="tabnavIndex"></Tabnav>
				</div>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	import Tabnav from '../../components/Tabnav.vue'
	import taskBox from '../../components/taskBox.vue'
	import PcHedaer from '../../components/pcheader.vue'
	import PcDrawer from '../../components/pcdrawer.vue'
	export default {
		components: {
			Tabnav,
			taskBox,
			PcHedaer,
			PcDrawer
		},
		data() {
			return {
				lists:[],
				allMoney:0,
				tabnavIndex: 1,
				selecttype: 1,
				selecttab: 0,
				selecthuodong: 0,
				selectfanshui: 2,
				selecttabTow:0,
				scrollTop: 0, //默认距离顶部的距离
				isShow: false, //控制返回顶部按钮的显隐
				scrollTrigger: false, //默认初始值
				
				scrollTop1: 0,
				
				navs: [{
						id: 0,
						name: this.$t('h_prefereDetalis.title23'),
						key: 'icon_game_menu_active_0',
					},
					{
						id: 2,
						name: this.$t('h_prefereDetalis.title24'),
						key: 'icon_game_menu_active_3',
					},
					{
						id: 7,
						name: this.$t('h_prefereDetalis.title25'),
						key: 'icon_game_menu_active_1',
					},
					{
						id: 6,
						name: this.$t('h_prefereDetalis.title26'),
						key: 'icon_game_menu_active_2',
					},
					{
						id: 1,
						name: this.$t('h_prefereDetalis.title27'),
						key: 'icon_game_menu_active_4',
					},
					{
						id: 4,
						name:this.$t('h_prefereDetalis.title28'),
						key: 'icon_game_menu_active_5',
					},
					{
						id: 3,
						name: this.$t('h_prefereDetalis.title29'),
						key: 'icon_game_menu_active_8',
					},
				
					// {
					// 	id: -2,
					// 	name: this.$t('h_prefereDetalis.title30'),
					// 	key: 'icon_game_menu_active_100',
					// },
					// {
					// 	id: -3,
					// 	name: '收 藏',
					// 	key: 'icon_game_menu_active_101',
					// },
					{
						id: -4,
						name: this.$t('h_prefereDetalis.title31'),
						key: 'comm_icon_ss',
					},
				],
				navIndex1:0,
				cates:[],
				lists:[]
			}
		},
		created() {
			this.activity_cate()
		},
		methods: {
			activity_cate(){
				const loading = this.$loading({
				    lock: true,
				    text: 'Loading',
				    spinner: 'el-icon-loading',
				    background: 'rgba(0, 0, 0, 0.7)'
				});
				this.$api.activity_cate({},(res)=>{
					loading.close()
					if(res.code == 0){
						this.cates = res.data
						this.activity()
					}else{
						// this.$message.error(res.msg);
					}
				})
			},
			activity(){
				const loading = this.$loading({
				    lock: true,
				    text: 'Loading',
				    spinner: 'el-icon-loading',
				    background: 'rgba(0, 0, 0, 0.7)'
				});
				this.$api.activity({
					pid:this.cates[this.selecthuodong].id
				},(res)=>{
					loading.close()
					if(res.code == 0){
						this.lists = res.data
					}else{
						// this.$message.error(res.msg);
					}
				})
			},
			pageScroll1(e) {
				this.scrollTop1 = e.target.scrollTop
			},
			back1(){
				this.$router.go(-1)
			},
			openMenus(){
				this.$refs.pcDrawer.openMenus()
			},
			closeMenus(){
				this.$refs.pcDrawer.closeMenus()
			},
			changeNav1(item) {
				this.$router.push('/')
			},
			
			changetab(e) {
				this.selecttab = e;
				if(this.selecttab!=1){
					this.selecttabTow=e;
				}
			},
			changehuodong(e) {
				this.selecthuodong = e;
				this.lists = [];
				this.activity()
			},
			changefanshui(e) {
				this.selectfanshui = e;
			},
			changeSelType(e) {
				this.selecttype = e;
			},
			seltabTo(e){
				console.log(e);
					this.selecttab = e;
			},
			godetail(item) {
				this.$router.push('./detail?id='+item.id)
			},
			goreceive() {
				this.$router.push('./process')
			},
			goRatioList(item) {
				this.$router.push('./ratioList')
			},
			goback() {
				this.$router.go(-1)
			}
		}
	}
</script>
<style>
	.pageInpt{
		display: flex;
	}
	.block{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 20px;
	}
	.pageInpt .el-input__inner {
	    background-color: var(--theme-main-bg-color) !important;
	    border-color: var(--theme-color-line) !important;
	    border-radius: 5px !important;
	    color: var(--theme-text-color-darken) !important;
	    font-size:13px !important;
	    height: 30px !important;
	    line-height: 30px !important;
	    padding: 0  !important;
		margin-left: 5px !important;
	}
	.pageInpt .el-pagination__jump {
	    display: block !important;
	    display: flex !important;
	}
	.pageInpt .el-pagination__editor.el-input {
	    width: 45px!important;
	    margin-right: 10px!important;
	}
	.is-reverse{
		right: 0;
		top: 21px !important;
		height: 25px !important;
		transform: scale(.8);
	}
	.el-icon-arrow-up{
		right: 0;
		top: -20px !important;
		height: 25px !important;
		transform: scale(.8);
	}.el-input__suffix{
		display: none!important;
	}
	.pageInpt .el-pagination.is-background .btn-prev, .el-pagination.is-background .el-pager li {
	   background-color: var(--theme-main-bg-color)!important;
	       border:1px solid var(--theme-color-line)!important;
		color: var(--theme-text-color-darken)!important;
	}
	.pageInpt .el-pagination.is-background .btn-next, .el-pagination.is-background .btn-prev, .el-pagination.is-background .el-pager li{
	    background-color: var(--theme-main-bg-color)!important;
	    border:1px solid var(--theme-color-line)!important;
	}
	 .el-pagination.is-background .btn-next, .el-pagination.is-background .btn-prev, .el-pagination.is-background .el-pager li {
	   background-color: var(--theme-main-bg-color)!important;
	   border:1px solid var(--theme-color-line)!important;
	}
	 .el-pagination.is-background .el-pager li:not(.disabled).active {
	    background-color: var(--theme-primary-color)!important;
	    color: #FFF!important;
	}
	
.pageInpt .el-input__icon {
    width: 10px !important;
    /* line-height:10px !important; */
    font-size: 16px !important;
	margin-right: 5px !important;
}
</style>
<style scoped lang="less">
	* {
		box-sizing: border-box;
	}

	.header {
		width: 100%;
		height: 46px;
		// border: 1px solid var(--theme-color-line);
		background: var(--theme-main-bg-color);
		border-bottom: 0.01rem solid var(--theme-color-line);
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding: 0 30px;
	}
	
	.headerleft {
		font-size: .24rem;
		height: 0.8rem;
		width: 0.8rem;
		display: flex;
		align-items: center;
		color: var(--theme-text-color);
		cursor: pointer;
	}
	
	.headertitle {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0 0.34rem;
		font-size: .3rem;
		margin-top: -0.014rem;
		color: #fff;
		text-align: center;
	}
	
	.headerright {
		height: 0.8rem;
		width: 0.8rem;
	}

	.hitem {
		height: 45px;
		border-bottom: 2px solid transparent;
		line-height: 45px;
		font-size: 12px;
		color: #fff;
		margin-left: 30px;
	}

	.hitem:first-child {
		margin-left: 0;
	}

	.hitem.active {
		color: var(--theme-primary-color);
		border-bottom: 2px solid var(--theme-primary-color);
	}

	.con {
		width: 100%;
		display: flex;
		justify-content: space-between;
		padding: 0 10px;
		padding-top: 10px;
		background-color: transparent !important;
	}

	.left {
		width: 75px;
		height: auto;
	}

	.litem {
		width: 100%;
		height: 52.5px;
		position: relative;
		margin-top: 10px;
	}

	.litem:first-child {
		margin-top: 0;
	}

	.litem>img {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 1;
	}

	.litembox {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 2;
		padding: 6px 5px 0 5px;
		color: rgb(173, 182, 196);
	}

	.litemboxTow {
		display: flex;
		padding: 0px 5px 0 5px;
		align-items: center;
		justify-content: center;
	}

	.litembox.color {
		color: #fff;
	}
	
	.litembox>.icon {
		display: block;
		margin: 0 auto;
		width: 22px;
		height: 18px;
		font-size: .44rem;
	}
	
	.litemboxTow>div {
		text-align: center;
		font-size: 14px;
	}
	
	.litemboxTow>.icon {
		display: block;
		margin: 5px 10px 0px 5px;
		width: 25px;
		height: 20px;
		font-size: 18px;
	}

	.litembox>div {
		text-align: center;
		font-size: 12px;
	}

	.litem1 {
		width: 60px;
		height: 25px;
		padding: 0 2.5px;
		line-height: 25px;
		text-align: center;
		font-size: 12px;
		color: #ffff;
		background-color: rgb(153, 153, 153);
		border-radius: 5px;
		margin: 0 auto;
		margin-top: 10px;
	}

	.litem2 {
		width: 60px;
		height: 25px;
		padding: 0 2.5px;
		line-height: 25px;
		text-align: center;
		font-size: 12px;
		color: #ffff;
		background-color: rgb(0, 93, 254);
		border-radius: 5px;
		margin: 0 auto;
		margin-top: 10px;
	}
	
	.litem2THree {
		width: 70px;
		height: 30px;
		line-height: 30px;
		font-size: 13px;
		cursor: pointer;
	}

	.litem1Tow {
		width: 80px;
		height: 30px;
		padding: 0 2.5px;
		line-height: 30px;
		text-align: center;
		font-size: 12px;
		color: #ffff;
		background-color: #1c8ac1;
		border-radius: 5px;
		margin: 0 auto;
		margin-top: 10px;
		box-shadow: var(--theme-aside-box-shadow);
		color: var(--theme-text-color-side-tabs);
	}

	.litem2Tow {
		background-color: rgb(0, 93, 254);
		color: var(--theme-primary-font-color);
	}

	.right {
		flex: 1;
		height: calc(100vh - 1.2rem);
		padding-left: 10px;
		padding-bottom: 1.2rem;
		overflow-y: scroll;
	}

	.ul {
		width: 102%;
		height: auto;
		overflow-y: auto;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		align-items: center;
	}
	.ul li{
		width: 48%;
		height: 190px;
		// background-color: var(--theme-top-nav-bg);;
		border-radius: 7px;
		padding: 7px;
	}
	.ul li img{
		width: 100%;
		height: 100%;
	}

	.ritem {
		width: 100%;
		padding: 5px;
		height: 127.5px;
		margin-bottom: 10px;
		background-color: rgb(21, 29, 41);
		border-radius: 5px;
	}

	.ritem img {
		width: 100%;
		height: 100%;
	}

	/* 返回顶部样式 */
	.scrollBox {
		position: fixed;
		bottom: 1.44rem;
		right: 0.1rem;
		width: 1.1rem;
		height: 50px;
		border-radius: 0.14rem;
		padding: 0.14rem 0.05rem 0.04rem;
		z-index: 99;
		text-align: center;
		box-shadow: 0.02rem 0 0.06rem 0 rgb(0 0 0 / 10%);
		cursor: pointer;
		background-color: var(--theme-top-nav-bg);;
		border: .01rem solid var(--theme-color-line);
	}

	.scrollBox .icon {
		font-size: .3rem;
		height: 0.38rem;
		margin: 0 auto;
		margin-bottom: 0.04rem;
		width: 0.38rem;
		background-color: var(--theme-primary-color);
		border-radius: 50%;
		color: #ffffff;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.scrollBox div {
		font-size: 12px;
		color: rgb(85, 101, 126);
	}

	.con1header {
		width: 100%;
		height: 0.7rem;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 0.2rem;
	}

	.con1header .text {
		font-size: .22rem;
		color: var(--theme-alt-neutral-2);
	}

	.fanshuiritem {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: var(--theme-top-nav-bg);;
		border-radius: 0.12rem;
		font-size: .2rem;
		margin-bottom: 0.2rem;
		min-height: 1.1rem;
		padding: 0.2rem 0 0.2rem 0.1rem;
	}

	.fanshuiritem .left {
		width: 0.7rem;
		margin-top: -0.1rem;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		color: rgb(173, 182, 196);
	}

	.fanshuiritem .left img {
		width: 0.5rem;
		height: 0.5rem;
	}

	.fanshuiritem .center {
		flex: 1;
		padding-left: 0.1rem;
		color: var(--theme-alt-neutral-2);
	}

	.fanshuiritem .center .up {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 0.14rem;
	}

	.fanshuiritem .center .up .righttext {
		flex-shrink: 0;
		padding-left: 0rem;
		padding-right: 0.06rem;
		/* width: 1.76rem; */
		text-align: left;
	}

	.fanshuiritem .icon {
		color: var(--theme-color-line);
		padding: 0 0.18rem 0 0;
	}

	.fanshuiritem .icon svg {
		display: block;
		height: 0.26rem;
		transform: rotate(180deg);
		width: 0.26rem;
	}

	/* 2 */
	dl,
	ol,
	ul {
		margin-bottom: 0.2em;
		margin-top: 0;
	}

	ul {
		list-style: none;
	}

	.nqZoMAOa9VoBq0DesDWl li {
		background-color: var(--theme-main-bg-color);
		border-radius: 0.1rem;
		-webkit-box-shadow: 0 0.03rem 0.09rem 0 rgb(0 0 0 / 6%);
		box-shadow: 0 0.03rem 0.09rem 0 rgb(0 0 0 / 6%);
		display: -ms-flexbox;
		margin-top: 0.2rem;
		padding: 0.15rem 0.2rem;
		position: relative;
	}

	.nqZoMAOa9VoBq0DesDWl li:first-child {
		margin-top: 0;
	}

	.nqZoMAOa9VoBq0DesDWl .VUy6m5HGRRX5D9px4aDm {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 0.05rem 0.2rem 0.15rem 0.05rem;
	}

	._Xh4S8uJ8rtshK0NDPr8 .hg3pWm3VA8nZxTi_potS {
		color: var(--theme-text-color-process-text);
		font-size: .16rem;
		line-height: .22rem;
		width: 84px;
		height: 10px;
		background-color: #53677d;
		border-radius: 5px;
		text-align: center;
	}

	.nqZoMAOa9VoBq0DesDWl .VUy6m5HGRRX5D9px4aDm .seivOAypKS3Yw9Rn3hI9 {
		color: var(--theme-text-color-darken);
		font-size: .2rem;
		line-height: 1.2;
	}
.a7kKVFMt7IcMdx7bFSPA{
	color: var(--theme-primary-color);
}
	.nqZoMAOa9VoBq0DesDWl .VUy6m5HGRRX5D9px4aDm .seivOAypKS3Yw9Rn3hI9 {
		min-height: 0.4rem;
	}

	._Xh4S8uJ8rtshK0NDPr8,
	._Xh4S8uJ8rtshK0NDPr8 .fanXMnrLePJ81NLxoAq8 {
		height: 0.2rem;
	}

	._Xh4S8uJ8rtshK0NDPr8 .fanXMnrLePJ81NLxoAq8 {
		background-color: var(--theme-secondary-color-success);
		border-radius: 0.2rem;
		height: 0.2rem;
		text-indent: -99.99rem;
	}


	.nqZoMAOa9VoBq0DesDWl .WzttGCRh1zz4Ew8j8EDv {
		bottom: 0.18rem;
		right: 0.12rem;
		display: flex;
		align-items: center;
	}

	.nqZoMAOa9VoBq0DesDWl .FiPDewz_FHIbbkU6lG2g,
	.nqZoMAOa9VoBq0DesDWl .HfvXXf9iXxGtgzlM8whR {
		-ms-flex-align: center;
		align-items: center;
		display: -ms-flexbox;
		display: flex;
		font-size: .16rem;
	}

	.XGEOwGXgDL9a2SebPqvj {
		color: var(--theme-secondary-color-finance);
	}

	.HI77FtRdvO4aiGOC1sgp {
		color: var(--theme-secondary-color-success);
	}

	.nqZoMAOa9VoBq0DesDWl .FiPDewz_FHIbbkU6lG2g {
		margin-left: 0.3rem;
	}

	.lNN1n3xmTNF7b6i1nG80.tbneT0bs0pWuU_T1Byqz {
		background-color: var(--theme-primary-color) !important;
		color: var(--theme-primary-font-color) !important;
	}

	.lNN1n3xmTNF7b6i1nG80 {
		font-size: .2rem;
		height: 0.5rem;
		width: 1.2rem;
	}

	.ant-btn,
	.ant-select-dropdown {
		border-radius: 0.14rem;
	}

	.eHg0yRf1S2LNSSMGVlpa {
		background-color: var(--theme-main-bg-color);
		border-radius: 0.1rem;
		-webkit-box-shadow: 0 0.03rem 0.09rem 0 rgb(0 0 0 / 6%);
		box-shadow: 0 0.03rem 0.09rem 0 rgb(0 0 0 / 6%);
		color: var(--theme-text-color);
		font-size: .18rem;
		line-height: 1.56;
		padding: 0.25rem 0.2rem;
	}

	.eHg0yRf1S2LNSSMGVlpa {
		font-size: .22rem;
		line-height: 1.45;
	}

	.eHg0yRf1S2LNSSMGVlpa p {
		/* margin-top: 0.05rem; */
	}

	.UwyNP8CcObxeFMJmAhCj {
		color: var(--theme-text-color-darken);
	}
	
	.nodata{
		margin: 0 auto;
		text-align: center;
		margin-top: 2rem;
	}
	.nodata img{
		height: 3.62rem;
		margin-bottom: 0.1rem;
		margin: 0 auto;
		width: 4rem;
	}
	.nodata div{
		color: var(--theme-alt-neutral-2);
		font-size: .26rem;
	}
	
	.rightCon {
		width: 100%;
		margin: 0 auto;
	}
	.con1headerTow {
		width: 100%;
		height: 30px;
		display: flex;
		align-items: center;
	}
	
	.con1headerTow .text {
		font-size: 15px;
		color: var(--theme-alt-neutral-2);
		margin-right: 30px;
	}
	.fanshuiBox {
		width: 100%;
		margin-top: 20px;
	}
	
	.fanshuiBox>ul {
		width: 100%;
		height: 42px;
		display: flex;
		align-items: center;
		font-size: 15px;
		color: var(--theme-text-color-darken);
		border: 1px solid var(--theme-color-line);
		justify-content: space-between;
		border-radius: 5px;
		background-color: var(--theme-bg-color);
	}
	
	.fanshuiBox>ul li {
		width: 16%;
		text-align: center;
	}
	
	.fanshuiBox>ul li:nth-child(1) {
		width: 20%;
	}
	
	.fanshuiBox>ul li:nth-child(6) {
		width: 10%;
	}
	
	.fanlistBox>ul {
		width: 100%;
		height: 42px;
		display: flex;
		align-items: center;
		font-size: 15px;
		justify-content: space-between;
		border-radius: 5px;
	}
	
	.fanlistBox>ul li {
		width: 16%;
		text-align: center;
		color: var(--theme-text-color);
	}
	
	.fanlistBox>ul li:nth-child(1) {
		width: 20%;
	}
	
	.fanlistBox>ul:nth-child(2n) {
		background-color: var(--theme-bg-color);
	}
	
	.fanlistBox>ul li:nth-child(6) {
		width: 10%;
		font-size: 14px;
		cursor: pointer;
		color: var(--theme-primary-color);
	}
	
	.fanlistBox>ul li:nth-child(5) {
		color: var(--theme-secondary-color-finance);
	}
	
	.liOne {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.liOne img {
		width: 30px;
		height: 30px;
		margin-right: 5px;
	}
	/* 底部 */
	.bottomBox{
		background: var(--theme-side-footer-bg-color);
		width: 100%;
		margin-top: 80px;
	}
	.bottomBoxOne{
		width: 62%;
		margin: 0 auto;
		display: flex;
		flex-direction: column;
		justify-content: center;
		/* align-items: center; */
	}
	.boxTop{
		display: flex;
		justify-content: space-between;
		padding: 20px 0px;
		box-sizing: border-box;
	}
	.boxTopL{
		display: flex;
		justify-content: space-between;
		font-size: 15px;
	}
	.boxTopL li{
		width: 176px;
		color: var(--theme-text-color-lighten);
	}
	.boxTopL h3{
		font-weight: 400;
		font-size: 15px;
		color: var(--theme-text-color);
		margin-bottom: 8px;
	}
	.boxTopL a{
		cursor: pointer;
		color: var(--theme-text-color-lighten);
		margin-bottom: 8px;
	}
	.boxTopL a:hover{
		color: var(--theme-primary-color);
	}
	.boxTopR{
		    width: 420px;
	}
	.boxTopRImg{
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		justify-content: center;
	}
	.boxTopRImg img{
		width: 45px;
		height: 45px;
		margin: 0px 12px 12px 0px;
	}
	.boxTopRText{
		font-size: 13px;
		margin-top: 10px;
		color: var(--theme-text-color-lighten);
	}
	.boxCon{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.boxCon img{
		width: 85px;
		height:30px;
		margin: 10px 8px;
	}
	.boxCon img:nth-child(1),.boxCon img:nth-child(2),.boxCon img:nth-child(3){
		width: 95px;
		height:30px;
		margin: 10px 6px;
	}
	.boxBot{
		font-size: 13px;
		padding-bottom: 20px;
		box-sizing: border-box;
		text-align: center;
		color: var(--theme-text-color-lighten);
	}
	/* pc */
	.bghhhhh {
		flex: 1;
		height: 300px;
	}
	.rightTow {
		flex: 1;
		background: var(--theme-main-bg-color);
		box-shadow: 0 0.03rem 0.09rem 0 rgb(0 0 0 / 6%);
		padding: 10px;
		box-sizing: border-box;
		margin-left: 15px;
		border-radius: 5px;
	}
	
	.pc_goTop{
		width: 66px;
		position: fixed;
		bottom: 55px;
		z-index: 100;
		right: 15px;
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: var(--theme-main-bg-color);
		border: 1px solid var(--theme-color-line);
		border-radius: 6px;
		padding: 7px 0;
		cursor: pointer;
		z-index: 9999;
		i {
			display: flex;
			align-items: center;
			display: block;
			width: 22px;
			height: 22px;
			line-height: 15px;
			font-size: 22px;
			text-align: center;
			background-color: var(--theme-primary-color);
			border-radius: 50%;
			color: var(--theme-primary-font-color);
			margin: 7px auto 0;
		}
		span{
			word-wrap: break-word;
			color: var(--theme-text-color-lighten);
			font-size: 12px;
			display: block;
			text-align: center;
		}
	}
</style>